﻿<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,maximum-scale=1,user-scalable=no">
    <title>6P</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/main.css">
    <style type="text/css">
        html,body{ background-color: #F2F2F2;}
    </style>
</head>
<body>
    <!-- 中间内容 -->
    <div class="activeClose">
        <img src="images/close.png" class="closeBtn">
    </div>
    <section class="lottery" id="lottery">
        <img class="banner" src="images/title_u180.jpg">
        <!-- 抽奖轮盘 -->
        <table width="100%" border="0" cellpadding="0" cellspacing="15px">
            <tbody>
                <tr>
                    <td class="lottery-unit lottery-unit-0 ">
                        <span class="photo j_1"><img data-src="images/u105.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-1 j_1">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-2">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-3">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-4">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-15">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <!-- 抽奖按钮 -->
                    <td colspan="3" rowspan="3">
                        <div class="result">
                            <div class="pr awardBox">
                                <div  class="award">
                                    <img src="images/u126.jpg" class="w100">
                                    <span class="prev">上一页</span>
                                </div>
                                <div class="textC w50 padLR375">
                                    <span class="db line15 font48 colorY tit dn">恭喜您抽中</span>
                                    <span class="db line15 font40">茉莉蜜桃清口含片</span>
                                    <span class="db line15 color5e font30">43g/瓶</span>
                                    <span class="db line15 colorR font48">&yen;7.00</span>
                                    <div class="line15 font24 js_pay">
                                        <span class="dib w65 padTB375"><img src="images/wx.png" class="w100"></span>
                                        <span class="db bold font28">扫码支付</span>
                                    </div>
                                    <div class="dn shipmentBox js_lottery">
                                        <p class="shipment colorB">支付成功<br>正在出货</p>
                                        <p class="pickUp colorR">出货成功<br>请取货</p>
                                        <span class="cjBtn">开始抽奖</span>
                                        <span class="exitBtn">退出</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="lottery-unit lottery-unit-5">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-14">
                    <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                    <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-6">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-13">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-7">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-12">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-11">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-10">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-9">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-8">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 活动说明 -->
        <div class="wrapper font20">
            <span class="title">活动说明：</span>
            <p class="content"> 1、每位客户（用户ID、收货人、收货地址、电话号码、E-mail、网银或支付宝账号，以上任何消息重复均视为同一客户，具体情况由体验馆工作人员核定）限抽1次。<br> 2、实物奖品抽中后，我们将为您免费配送至所选体验馆；到货后请凭中奖手机号（带手机）到店自提。在接到领奖通知次日起，7天内未领取的，直接取消领奖资格，实物奖品不退换、不补件；<br> 3、红包奖品发放：抽中红包后，红包序列号将以短信的形式发送至手机，请注意查收；<br> 4、红包使用方法：凭序列号短信到对应体验馆在体验馆人员帮助下下单使用；<br>5、红包使用条件：红包不能抵扣快递、物流货服务费；1000元红包订单金额满5000元可使用，体验馆特卖、团购、拍卖、秒杀产品及第三方配送产品除外。每个订单只能使用一个红包，本红包不能与其他红包/预约券/抵扣券/优惠码同时使用；</p>
        </div>
    </section>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/global.js"></script>
    <script type="text/javascript">
        myJS.imgScale('.j_1', '1', '1');
        myJS.ImgCenter('.loadImg');
        
        /*初始化隐藏关闭按钮*/
        $('.exitBtn').hide();

        $('.js_pay').on('click','img',function(){
            $('.js_pay').hide();
            $('.js_lottery').show();
            $('.shipment').fadeOut('slow',function(){
                $('.pickUp').fadeIn(2000,function(){
                    $('.pickUp').animate({opacity:0},2000);
                });
                
            });
        })

        var lottery={
            index:-1,    //当前转动到哪个位置，起点位置
            count:0,    //总共有多少个位置
            timer:0,    //setTimeout的ID，用clearTimeout清除
            speed:20,    //初始转动速度
            times:0,    //转动次数
            cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize:-1,    //中奖位置
            init:function(id){
                if ($("#"+id).find(".lottery-unit").length>0) {
                    $lottery = $("#"+id);
                    $units = $lottery.find(".lottery-unit");
                    this.obj = $lottery;
                    this.count = $units.length;
                    $lottery.find(".lottery-unit-"+this.index).addClass("active");
                };
            },
            roll:function(){
                var index = this.index;
                var count = this.count;
                var lottery = this.obj;
                $(lottery).find(".lottery-unit-"+index).removeClass("active");
                index += 1;
                if (index>count-1) {
                    index = 0;
                };
                $(lottery).find(".lottery-unit-"+index).addClass("active");
                this.index=index;
                return false;
            },
            stop:function(index){
                this.prize=index;
                return false;
            }
        };

        function roll(){
            lottery.times += 1;
            lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
            if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
                clearTimeout(lottery.timer);
                lottery.prize=-1;
                lottery.times=0;
                click=false;
            }else{
                if (lottery.times<lottery.cycle) {
                    lottery.speed -= 10;
                }else if(lottery.times==lottery.cycle) {
                    var index = Math.random()*(lottery.count)|0;//中奖物品通过一个随机数生成
                    lottery.prize = index;        
                }else{
                    if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                        lottery.speed += 110;
                    }else{
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed<40) {
                    lottery.speed=40;
                };
                //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
                lottery.timer = setTimeout(roll,lottery.speed);//循环调用
            }
            return false;
        }

        var click=false;

        window.onload=function(){
            lottery.init('lottery');
            $("#lottery .cjBtn").click(function(){
                if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
                    return false;
                }else{
                    $('.tit').show();
                    $('.cjBtn').hide();
                    $('.exitBtn').show();

                    lottery.speed=100;
                    roll();    //转圈过程不响应click事件，会将click置为false
                    click=true; //一次抽奖完成后，设置click为true，可继续抽奖
                    return false;
                }
            })
        };
    </script>
</body>
</html>